<template>
  <el-aside class="menu-div" :style="'width: ' + (isCollapse ? '64' : '240') + 'px !important;'">
    <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
      active-text-color="#409eff" style="height: 100%; overflow-y: auto;" @select="select" :collapse="isCollapse">
      <el-submenu :index="index + ''" v-for="item, index in menuInfo" :key="index"
        v-show="item.hidden == null || !item.hidden">
        <template slot="title">
          <i v-if="item.meta && item.meta.icon" :class="item.meta.icon"></i>
          <span v-if="item.meta && item.meta.title" slot="title">{{ item.meta.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item :index="item.path + '/' + childItem.path" v-for="(childItem, index) in item.children"
            :key="'child' + index">
            <i v-if="childItem.meta && childItem.meta.icon" :class="childItem.meta.icon"></i>
            <span v-if="childItem.meta && childItem.meta.title">{{ childItem.meta.title }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>

    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Meun",
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    // 跳转路径
    select(index) {
      this.$router.push(index)
    },

  },
  computed: {
    isCollapse() {
      return this.$store.state.menu.isCollapse
    },
    menuInfo() {
      return this.$store.state.menu.routers || []
    }
  }

}
</script>

<style scoped>
.menu-div {
  height: 100%;
  box-shadow: 2px 0 6px rgba(0, 21, 41, .01);
  z-index: 1;
  transition: width .3s ease;
}
</style>